<template>
  <div class="login-wrap">
    <img src="@/assets/logo-login.png" alt="">
    <a-form class="form-data-info">
      <a-input placeholder="请输入手机号码" v-model="mobile" ref="userMobile" :maxLength="11" allowClear>
        <a-icon slot="prefix" type="user"/>
      </a-input>
      <a-input v-show="login_by_code" placeholder="请输入验证码" v-model="code" ref="userCode" class="userCode" allowClear>
        <a-icon slot="prefix" type="safety"/>
        <span slot="suffix">
          <a-button class="send-code-btn" type="default" :disabled="disabled" @click="sendSms">{{time == 60 ? '发送验证码' : time}}</a-button>
        </span>
      </a-input>
      <a-input 
        class="userCode" 
        v-show="!login_by_code" 
        v-model="password" 
        :type="eyeType === 'eye' ? 'text' : 'password'" 
        placeholder="请输入密码" 
        ref="userPwd" 
        allowClear
      >
        <a-icon slot="prefix" type="lock"/>
        <span slot="suffix">
          <a-icon v-show="password.length" :type="eyeType" @click="inputType"/>
          <a-button class="send-code-btn" type="default">修改密码</a-button>
        </span>
      </a-input>

      <a-button class="submit-btn" type="primary" block @click="login">登 录</a-button>
      <a-row class="login-type" :guitter="20">
        <a-col :span="12" @click="login_by_code = !login_by_code">{{login_by_code ? '账号密码登录' : '短信验证码登录'}}</a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { 
  Input, 
  Icon, 
  Button,
  Row,
  Col
} from 'ant-design-vue'

let canRun = true;

export default {
  name: 'login',
  data() {
    return {
      mobile: '',
      code: '',
      password: '',
      login_by_code: true,
      expire_at: '',
      oncestr: '',
      eyeType: 'eye-invisible',
      time: 60,
      disabled: true
    }
  },
  watch: {
    mobile(newVal) {
      this.disabled = !/^1[2-9]\d{9}$/.test(newVal)
    }
  },
  components:{
    [Input.name]: Input,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col
  },
  methods: {
    inputType() {
      this.eyeType = this.eyeType === 'eye' ? 'eye-invisible' : 'eye';
    },
    async sendSms() {
      if(!canRun){return}
      if(!/^1[2-9]\d{9}$/.test(this.mobile)){
        this.$message.error('请输入正确的手机号码');
      }else{
        const {
          expire_at,
          oncestr
        } = await this.$api.sendSms(this.mobile)
        this.expire_at = expire_at
        this.oncestr = oncestr
      }
    },
    async login() {
      if(!canRun){return}
      canRun = false
      const {
        mobile,
        code,
        password,
        login_by_code,
        oncestr
      } = this

      if(!/^1[2-9]\d{9}$/.test(mobile)){
        this.$message.error('请输入正确的手机号码');
      }else if (login_by_code && !code){
        this.$message.error('请输入验证码');
      }else if(!login_by_code && !password){
        this.$message.error('请输入密码');
      }else{
        const userInfo = await this.$api.login({
          mobile,
          code,
          password,
          login_by_code,
          oncestr,
          ip: '127.0.0.1'
        })
        canRun = true;
        if(!userInfo){return}
        this.$store.commit('set_userinfo', userInfo)
        this.$router.go(-1);
      }
      
    }
  }
}
</script>

<style lang="less" scoped>
.login-wrap {
  background: #ffffff;
  height: 100vh;
  text-align: center;
  img {
    width: 37%;
    margin: 60px auto 40px;
  }

  /deep/ .ant-input {
    margin-top: 5px;
    border-width: 0 0 1px 0;
    border-radius: 0;
    height: 40px;
    &:focus,
    &:hover {
      border-right-width: 0 !important;
      box-shadow: none;
    }
  }

  .form-data-info {
    display: block;
    width: 80%;
    margin: 20px auto;
    .userCode {
      /deep/.ant-input {
        padding-right: 160px;
      }
      /deep/.anticon {
        margin-right: 10px;
      }
      .send-code-btn {
        display: inline-block;
        width: 100px;
        border-left: 1px solid @color-main;
        color: @color-main;
        &:disabled {
          background-color: transparent;
          color: #999999;
        }
      }
    }
  }
  .submit-btn {
    height: 40px;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 16px;
  }
  .login-type {
    margin-top: 20px;
    font-size: 16px;
    text-align: left;
  }
}
</style>